<template>
  <div>
    <el-table
      :data="tableData"
      style="width: 100%"
      header-cell-class-name="table-header"
      :default-sort="{prop: 'date', order: 'descending'}"
    >
      <el-table-column
        prop="prodInfo"
        :label="$t('group.prodInfo')"
        fixed="left"
        width="300"
      >
        <template #default="scope">
          <div class="prod-info">
            <div class="prod-image">
              <ProdPic
                height="60"
                width="60"
                :pic="scope.row.prodUrl"
              />
            </div>
            <div class="prod-info-text">
              <span class="name">
                {{ scope.row.prodName }}
              </span>
              <span class="prod-price">{{ '￥ ' + scope.row.price }}</span>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible1"
        prop="expose"
        :label="$t('dataAnalysis.exposureTimes')"
      />
      <el-table-column
        v-if="isVisible2"
        prop="exposePersonNum"
        :label="$t('dataAnalysis.exposurePeoples')"
      />
      <el-table-column
        v-if="isVisible3"
        prop="addCartPerson"
        :label="$t('dataAnalysis.addCartNumbers')"
      />
      <el-table-column
        v-if="isVisible4"
        prop="addCart"
        :label="$t('dataAnalysis.carNumbers')"
      />
      <el-table-column
        v-if="isVisible5"
        prop="placeOrderPerson"
        :label="$t('dataAnalysis.placeOrderPerson')"
      />
      <el-table-column
        v-if="isVisible6"
        prop="payPerson"
        :label="$t('dataAnalysis.paidNumbers')"
      />
      <el-table-column
        v-if="isVisible7"
        prop="placeOrderNum"
        :label="$t('dataAnalysis.placeOrderNum')"
      />
      <el-table-column
        v-if="isVisible8"
        prop="payNum"
        :label="$t('dataAnalysis.goodsPaid')"
      />
      <el-table-column
        v-if="isVisible9"
        prop="placeOrderAmount"
        :label="$t('dataAnalysis.placeOrderAmount')"
      />
      <el-table-column
        v-if="isVisible10"
        prop="payAmount"
        :label="$t('dataAnalysis.goodsPaidAmount')"
      />
      <el-table-column
        v-if="isVisible11"
        prop="singleProdRate"
        :label="$t('dataAnalysis.unitConversionRate')"
      >
        <template #default="scope">
          <span>{{ scope.row.singleProdRate }}%</span>
        </template>
      </el-table-column>
      <el-table-column
        v-if="isVisible12"
        prop="refundNum"
        :label="$t('dataAnalysis.refundOrdersCounts')"
      />
      <el-table-column
        v-if="isVisible13"
        prop="refundPerson"
        :label="$t('dataAnalysis.applyingForRefund')"
      />
      <el-table-column
        v-if="isVisible14"
        prop="refundSuccessNum"
        :label="$t('dataAnalysis.refundedCounts')"
      />
      <el-table-column
        v-if="isVisible15"
        prop="refundSuccessPerson"
        :label="$t('dataAnalysis.refundedSuccessCounts')"
      />
      <el-table-column
        v-if="isVisible16"
        prop="refundSuccessAmount"
        :label="$t('dataAnalysis.successfulRefundAmount')"
      />
      <el-table-column
        v-if="isVisible17"
        prop="refundSuccessRate"
        :label="$t('dataAnalysis.refundRate')"
      >
        <template #default="scope">
          <span>{{ scope.row.refundSuccessRate }}%</span>
        </template>
      </el-table-column>
      <el-table-column
        fixed="right"
        :label="$t('remindPop.operation')"
      >
        <template #default="scope">
          <el-button
            type="text"
            @click="onClickHandle(scope.row)"
          >
            {{ $t('dataAnalysis.trendChartAnalysis') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-dialog
      v-model="trendVisible"
      :title="$t('dataAnalysis.naturalDiurnalTrendChart')"
      width="40%"
    >
      <common-chart
        v-if="prodSurveyChart.show"
        class="refund-chart"
        :options="prodSurveyChart.options"
        style="width: 100%; height: 300px"
      />
      <!-- /图表 -->
    </el-dialog>
  </div>
</template>

<script setup>
import ProdPic from '@/components/prod-pic/index.vue' // 趋势图时间数组

const props = defineProps({
  prodData: {
    type: Object,
    default: null
  }
})
const tableData = ref(props.prodData.data)
const sumData = ref(props.prodData.sumData)

watch(() => props.prodData, (newValue) => {
  tableData.value = newValue.data
  sumData.value = newValue.sumData
  onChangVisibles()
}, {
  deep: true
})
const seriesDataArr = ref([]) // 趋势图数据

const onClickHandle = (row) => {
  trendVisible.value = true
  singleProdTrendData(row.prodId)
}
const judgeStrArrIncludeOtherString = (str) => {
  const strArr = sumData.value
  return strArr.includes(str)
}
/**
 * 控制表格列显隐
 */
const isVisible1 = ref(false)
const isVisible2 = ref(false)
const isVisible3 = ref(false)
const isVisible4 = ref(false)
const isVisible5 = ref(false)
const isVisible6 = ref(false)
const isVisible7 = ref(false)
const isVisible8 = ref(false)
const isVisible9 = ref(false)
const isVisible10 = ref(false)
const isVisible11 = ref(false)
const isVisible12 = ref(false)
const isVisible13 = ref(false)
const isVisible14 = ref(false)
const isVisible15 = ref(false)
const isVisible16 = ref(false)
const isVisible17 = ref(false)
const trendVisible = ref(false) // 单个商品趋势弹窗
const onChangVisibles = () => {
  isVisible1.value = judgeStrArrIncludeOtherString($t('dataAnalysis.exposureTimes'))
  isVisible2.value = judgeStrArrIncludeOtherString($t('dataAnalysis.exposurePeoples'))
  isVisible3.value = judgeStrArrIncludeOtherString($t('dataAnalysis.addCartNumbers'))
  isVisible4.value = judgeStrArrIncludeOtherString($t('dataAnalysis.carNumbers'))
  isVisible5.value = judgeStrArrIncludeOtherString($t('dataAnalysis.placeOrderPerson'))
  isVisible6.value = judgeStrArrIncludeOtherString($t('dataAnalysis.paidNumbers'))
  isVisible7.value = judgeStrArrIncludeOtherString($t('dataAnalysis.placeOrderNum'))
  isVisible8.value = judgeStrArrIncludeOtherString($t('dataAnalysis.goodsPaid'))
  isVisible9.value = judgeStrArrIncludeOtherString($t('dataAnalysis.placeOrderAmount'))
  isVisible10.value = judgeStrArrIncludeOtherString($t('dataAnalysis.goodsPaidAmount'))
  isVisible11.value = judgeStrArrIncludeOtherString($t('dataAnalysis.unitConversionRate'))
  isVisible12.value = judgeStrArrIncludeOtherString($t('dataAnalysis.refundOrdersCounts'))
  isVisible13.value = judgeStrArrIncludeOtherString($t('dataAnalysis.applyingForRefund'))
  isVisible14.value = judgeStrArrIncludeOtherString($t('dataAnalysis.refundedCounts'))
  isVisible15.value = judgeStrArrIncludeOtherString($t('dataAnalysis.refundedSuccessCounts'))
  isVisible16.value = judgeStrArrIncludeOtherString($t('dataAnalysis.successfulRefundAmount'))
  isVisible17.value = judgeStrArrIncludeOtherString($t('dataAnalysis.refundRate'))
}
/**
 * 单个商品的趋势图
 */
let dateArr = [564, 324, 234, 123]
const prodSurveyChart = reactive({
  options: {},
  show: false
})
const onGetRealTimechartData = () => {
  prodSurveyChart.options = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: [$t('dataAnalysis.pageviews'), $t('dataAnalysis.numberOfVisitors'), $t('dataAnalysis.paidNumbers'), $t('dataAnalysis.paidGoodsCounts')]
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: dateArr,
      axisLine: {
        lineStyle: {
          color: '#999'
        }
      },
      axisTick: {
        show: false
      }
    },
    yAxis: {
      type: 'value',
      axisLine: { show: false },
      axisTick: { show: false }
    },
    series: seriesDataArr
  }
  prodSurveyChart.show = true
}
/**
 * 获取单个商品的趋势图数据
 */
const singleProdTrendData = (prodId) => {
  http({
    url: http.adornUrl('/admin/prodAnalysis/getSingleProdTrend'),
    method: 'get',
    params: http.adornParams(
      {
        prodId,
        shopId: null,
        dateType: props.prodData.params.dateValue,
        group: props.prodData.params.group,
        status: props.prodData.params.status,
        prodName: props.prodData.params.prodName,
        startTime: props.prodData.params.startTime,
        endTime: props.prodData.params.endTime
      }
    )
  }).then(({ data }) => {
    if (data) {
      dateArr = []
      seriesDataArr.value = []
      const obj1 = initObj($t('dataAnalysis.pageviews'))
      const obj2 = initObj($t('dataAnalysis.numberOfVisitors'))
      const obj3 = initObj($t('dataAnalysis.paidNumbers'))
      const obj4 = initObj($t('dataAnalysis.paidGoodsCounts'))
      data.forEach(i => {
        dateArr.push(i.currentDay)
        obj1.data.push(i.browse)
        obj2.data.push(i.visitor)
        obj3.data.push(i.payPerson)
        obj4.data.push(i.payNum)
      })
      seriesDataArr.value.push(obj1)
      seriesDataArr.value.push(obj2)
      seriesDataArr.value.push(obj3)
      seriesDataArr.value.push(obj4)
      onGetRealTimechartData()
    }
  })
}
/**
 * 初始化一个obj
 */
const initObj = (name) => {
  const obj = {}
  obj.name = name
  obj.type = 'line'
  obj.smooth = true
  obj.data = []
  return obj
}

</script>
<style scoped>
.prod-info {
  display: flex;
  align-items: center;
}
.prod-info .prod-info-text {
  flex: 1;
  margin-left: auto;
  display: flex;
  flex-direction: column;
}

.prod-info .prod-info-text .name {
  margin-left: 10px;
  line-height: 20px;
  color: #606266;
  text-overflow: ellipsis;
  -o-text-overflow: ellipsis;
  word-break: break-word;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.prod-info .prod-info-text .prod-price {
  margin-left: 10px;
  color: red;
  align-self: flex-start;
}
</style>
